<template>
  <div class="content-wrap">
    <div :class="['content']">
      <div class="ball-wrap">
        <div
          class="box"
          :style="`animation: rotateBall ${ballSpeed}s linear infinite`"
        ></div>
        <div class="circular-ring-img"></div>
      </div>
      <div class="system-wrap">
        <div class="system-menu menu-one">
          <template v-if="qingSys.length > 0">
            <span
              v-for="item in qingSys"
              @click="jumpToOtherSys(item)"
              :key="item.systemNo"
            >
              {{ item.systemName }}
            </span>
          </template>
          <template v-else>
            <b>暂无应用请配置</b>
          </template>
        </div>
        <div class="system-menu menu-two">
          <template v-if="zhiSys.length > 0">
            <span
              v-for="item in zhiSys"
              @click="jumpToOtherSys(item)"
              :key="item.systemNo"
            >
              {{ item.systemName }}
            </span>
          </template>
          <template v-else>
            <b>暂无应用请配置</b>
          </template>
        </div>
        <div class="system-menu menu-three">
          <template v-if="xingSys.length > 0">
            <span
              v-for="item in xingSys"
              @click="jumpToOtherSys(item)"
              :key="item.systemNo"
            >
              {{ item.systemName }}
            </span>
          </template>
          <template v-else>
            <b>暂无应用请配置</b>
          </template>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div :class="['bottom-content', showOther && 'bottom-content-show']">
      <div class="module">
        <div class="module-list">
          <el-carousel :interval="5000" arrow="always">
            <el-carousel-item
              v-for="(group, index) in renderOtherList()"
              :key="index"
            >
              <div class="list">
                <template v-for="(item, i) in group">
                  <div
                    class="module-list-item"
                    :key="i"
                    @click="jumpToOtherSys(item)"
                  >
                    <div class="logo-box">
                      <img
                        class="item-logo"
                        :src="
                          logoConfig[item.systemNo] || logoConfig['DEFAULT']
                        "
                      />
                    </div>
                    <div class="item-name" :title="item.systemName">
                      {{ item.systemName }}
                    </div>
                  </div>
                </template>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <div class="links-contain">
      <home-download />
    </div>
    <div class="other-app" @click="showOther = !showOther">
      <img :src="OtherAppIcon" />
    </div>
  </div>
</template>

<script>
import { modulesConfig } from '@path/config/systemConfig.js'
import { logoConfig, jumpToOtherSys } from '../../../common/config'
import Risk from '@path/static/images/theme3/risk.png'
import Command from '@path/static/images/theme3/command.png'
import Zhjcj from '@path/static/images/theme3/zhjcj.png'
import HomeDownload from '../../../components/home-download'
import OtherAppIcon from '@path/static/images/theme3/other-app.png'
import QingIcon from '@path/static/images/theme5/qing1.png'
import ZhiIcon from '@path/static/images/theme5/zhi1.png'
import XingIcon from '@path/static/images/theme5/xing1.png'
import { initBall } from './ball.js'
export default {
  props: ['systemList'],
  components: { HomeDownload },
  data() {
    return {
      modulesConfig: modulesConfig || { topConfig: [] },
      ballSpeed: modulesConfig?.ballSpeed || 12,
      logoConfig,
      moduleIcon: {
        risk: Risk,
        command: Command,
        zhjcj: Zhjcj,
      },
      OtherAppIcon,
      showOther: false,
      QingIcon,
      ZhiIcon,
      XingIcon,
    }
  },
  computed: {
    moduleList() {
      return (sysArrs) => {
        return this.systemList.filter((item) => sysArrs.includes(item.systemNo))
      }
    },

    // 情
    qingSys() {
      const qingList = this.modulesConfig?.qing || []
      return this.moduleList(qingList)
    },
    // 指
    zhiSys() {
      const zhiList = this.modulesConfig?.zhi || []
      return this.moduleList(zhiList)
    },
    // 行
    xingSys() {
      const xingList = this.modulesConfig?.xing || []
      return this.moduleList(xingList)
    },
    renderOtherList() {
      return (module) => {
        let tempArr = []
        const resArr = []
        const filterTopApp = (modulesConfig?.topConfig || []).reduce(
          (arr, current) => {
            return arr.concat(current?.children || [])
          },
          [],
        )
        const newData = this.systemList.filter(
          (item) => !filterTopApp.includes(item.systemNo),
        )
        newData.forEach((item, index) => {
          tempArr.push(item)
          index++
          if (!(index % 5)) {
            resArr.push(tempArr)
            tempArr = []
          }
        })
        if (tempArr.length) {
          resArr.push(tempArr)
        }
        return resArr
      }
    },
  },
  mounted() {
    initBall(this.ballSpeed)
  },

  methods: {
    jumpToOtherSys,
  },
}
</script>

<!-- <style lang="less" scoped>
@import './index.less';
</style> -->
<!-- 动态生成的css，不能添加scoped，否则会导致样式失效 -->
<style lang="less">
@import './index.less';
@import './ball.less';
</style>
